<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
    <script>
        $(function(){
            // attr(属性名)获取属性值
            // attr(属性名，属性值)设置属性
            // $("span").attr("data-id","1002");//原生属性
            // console.log($("span").attr("id"));
            // console.log($("span").attr("data-id"));

            // var chk=("#sex").prop("checked");// 返回值true/false 获取的直接转化布尔值，好处
            // console.log(chk);true/false
            // var chk2=$("#sex").attr("checked");//返回undefined
            // console.log(chk2);
            // $(":checkbox").attr("checked",true);
            // $(":checkbox").prop("checked","true");



            // $("#sex").change(function(){
            //     // $(":checkbox").prop("checked",false);//不能写死
            //  var chk1=   $(this).prop("checked");
            //  $(":checkbox").prop("checked",chk1);
            
            // });
            // $("#sex2").change(function(){
            //     $(":checkbox:not([id])").each(function(index,item){
            //         //console.log(item);
            //       var ck=  $(item).prop("checked");
            //       $(item).prop("checked",!ck);
            //     });
            // });



            // 没有参数时获取，带参数时的设置  
            // 固定：
            // html():获取的是包含html标签的代码 div<span>span</span>
            // text(): 获取的是纯文本 divspan
            // val():用来获取交互控件（表单控件（密码框、文本框等））的值   ""


            // 在设置时：html会解析其中的标签
            // var html =$("div").html();
            // var text =$("div").text();//text不会解析只是原样输出
            // var val =$("div").val();
            // console.log(html,text,val);

            // $("div").css("color","red")//改的是行内样式
            // $("div").css("width")
        })
    </script>
</head>
<body>
    <div><span>span</span></div>
    <form action="#">
        <span id="span" data-id="1001">姓名：</span>
        <input type="text" name="name"><br>
        <input type="checkbox" name="sex" id="sex">
        <label for="sex">全选/取消</label>
        <input type="checkbox" name="sex" id="sex2">
        <label for="sex">反选</label>
    </form>
    <input type="checkbox" name="">
    <input type="checkbox" name="">
    <input type="checkbox" name="">

</body>
</html>